<template>
  <div class="table-box">
    <div class="form-box">
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="任务名称：">
          <el-input v-model="Varname" placeholder=""></el-input>
        </el-form-item>
        <el-button type="primary" @click="query">查询</el-button>
      </el-form>
    </div>
    <div class="center">
      <el-table
        :maxHeight="table.props.height"
        :data="runTaskList"
        border
        @selection-change="">
        <el-table-column
          type="index"
          width="80"
          label="序号">
        </el-table-column>
        <el-table-column
          prop="id"
          label="任务ID"
        >
        </el-table-column>
        <el-table-column
          prop="processInstanceId"
          label="流程实例ID"
        >
        </el-table-column>
        <el-table-column
          prop="name"
          label="任务名称"
        >
        </el-table-column>
        <el-table-column
          prop="assignee"
          label="待办人"
        >
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="创建日期"
          :formatter="dateFormatCreatTime"
        >
        </el-table-column>
        <el-table-column
          label="是否暂停"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.suspended==false">否</span>
            <span v-else>是</span>
          </template>
        </el-table-column>
        <el-table-column
          prop=""
          label="操作"
        >
          <template slot-scope="scope">
            <el-button @click="taskAction(scope.row)" type="text" size="small">办理</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="page-box mt20 text-right">
      <el-pagination
        @current-change="query"
        :page-size="size"
        layout="total, prev, pager, next"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  import moment from 'moment';
  import Config from '../config';

  const otherH = 245;
  const tableH = document.body.offsetHeight - otherH;

  export default {
    name: 'RunTask',
    data() {
      return {
        table: {
          props: {
            height: document.body.offsetHeight - otherH
          }
        },
        runTaskList: [],
        total: 0,
        currentPage: 1,
        size: 10,
        Varname: ''
      }
    },
    created: function () {
      this.initPage();
    },
    mounted() {
      this.initPage();
    },
    methods: {
      initPage() {
        const tableH = document.body.offsetHeight - otherH;
        this.table.props.height = tableH;
        this.query();
      },
      //格式化创建时间
      dateFormatCreatTime: function (data, row) {
        if (data.createTime != null) {
          // return formatDates(data.createTime);
          return moment(data.createTime).format('YYYY-MM-DD HH:mm');
        }
      },
      //查询 包括分页查询 条件查询
      query(data) {
        const that = this;
        var Vstart = 0;

        if (data != undefined && !isNaN(data)) {
          Vstart = (data - 1) * 10;
        }

        const params = {
          start: Vstart,
          order: 'desc',
          sort: 'createTime'
        };
        if (this.Varname !== "") {
          params.nameLike = "%"+that.Varname+"%";
        }

        const url = `${Config.url}runtime/tasks`;

        this.$http.get(url, {params}).then(function (data) {
          that.runTaskList = data.data.data;
          that.total = data.data.total;
        }).catch(function (response) {
          console.info(response);
        });
      },
      //办理任务
      taskAction: function (row) {
        var businessKey;
        //通过流程实例获取businessKey
        /* this.$http.get(row.processInstanceUrl).then(function(data){
             console.info(data);
             businessKey=data.data.businessKey;
             var businessResult=businessKey.split(":");
             window.location.href=row.formKey+"&businessId="+businessResult[0]+"&businessType="+businessResult[1];
         });*/
        //更换成ajax请求  方便门户使用
        $.ajax({
          type: 'get',
          url: row.processInstanceUrl,
          async: true,
          success: function (data) {
            console.info(data);
            businessKey = data.businessKey;
            if (businessKey == undefined || businessKey == null) {
              window.location.href = row.formKey
            }
            var businessResult = businessKey.split(":");
            window.location.href = row.formKey + "&businessId=" + businessResult[0] + "&businessType=" + businessResult[1];
          }
        });
        /* //通过流程实例获取businessKey
         $.ajax({
             type: 'get',
             url: row.processInstanceUrl,
             async: false,
             success: function(data){
                 businessKey=data.businessKey;
                 console.info(businessKey);
             }
         });*/
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
